<!-- vue页面的布局部分 -->
<template>
    <a-form
      :model="formData"
      name="basic"
      :label-col="{ span: 24 }"
      :wrapper-col="{ span: 24 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <div id="container">
        <div id="loginwrapper">
          <div id="loginwindow">
            <div id="logininfo">
              <h1>系统账号注册</h1>
              <div id="username_wrapper">
                <a-form-item
                  label="用户名"
                  name="username"
                  :rules="[{ required: true, message: '请输入用户名' }]"
                >
                  <a-input allowClear style="font-size: 25px" v-model:value="formData.username" />
                </a-form-item>
              </div>
              <div id="password_wrapper">
                <a-form-item
                  label="登录密码"
                  name="password"
                  :rules="[{ required: true, message: '请输入密码' }]"
                >
                  <a-input-password
                    allowClear
                    style="font-size: 25px"
                    v-model:value="formData.password"
                  />
                </a-form-item>
              </div>
              <div id="btn_wrapper">
                <a-form-item :wrapper-col="{ span: 24 }">
                  <a-button
                    style="
                      height: 50px;
                      width: 150px;
                      font-size: 25px;
                      box-shadow: 0px 15px 25px -5px #000;
                      border-radius: 10px;
                    "
                    type="primary"
                    html-type="submit"
                    >注册</a-button
                  >
                </a-form-item>
              </div>
              <!-- <div id="a_wrapper">
                <a target="_blank" href="http://www.baidu.com/">立即注册</a>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </a-form>
  </template>
  
  <!-- vue页面的js代码部分 -->
  <script setup>
  import { reactive } from 'vue'
  import { reg } from '@/api/user.js'
  import router from '@/router/index.js'
//   import { setSatoken } from '@/utils/localStorageHandler.js'
  import md5 from 'md5'
  const formData = reactive({
    username: '',
    password: '',
  })
  const onFinish = async () => {
    // 通过reg函数将用户名和密码发给后端
    formData.password=md5(formData.password);
    const res = await reg(formData)
    // 保存登录的令牌信息
    // setSatoken(res.saTokenInfo.tokenName, res.saTokenInfo.tokenValue, res.saTokenInfo.tokenTimeout)
    // 向控制台输出res对象的信息
    console.log(res)
    // 切换路由到/ai,直接访问TheAi.vue组件
    // router.push('/ai')
  }
//   const onFinishFailed = (errorInfo) => {
//     console.log('Failed:', errorInfo)
//   }
  </script>
  
  <!-- vue页面的样式部分 -->
  <style scope>
  #container {
    background-image: url('../../assets/images/backgroundImg.jpg');
    background-repeat: round;
    background-size: cover;
  
    display: flex; /*使用flex弹性布局*/
    flex-direction: row; /*主轴为横轴*/
    justify-content: center; /*在主轴方向居中对齐*/
    align-items: center; /*在交叉轴方向居中对齐*/
  }
  
  /* html,
  body, */
  #container {
    height: 100%;
  }
  
  #loginwrapper {
    background-image: url('../../assets/images/loginBG.jpg');
    background-repeat: round;
    background-size: cover;
    width: 850px; /*宽度*/
    min-width: 850px; /*最小宽度*/
    height: 470px; /*高度*/
    border-radius: 10px; /*四个角变成圆角*/
    /*让子元素loginwindow从右到左排列*/
    display: flex;
    flex-direction: row-reverse;
  }
  
  #loginwindow {
    background-color: #fff;
    width: 45%;
    height: 100%;
    /*margin-left: 55%;*/
    border-radius: 10px; /*四个角变成圆角*/
  
    /*让子元素在主轴和交叉轴上都中对齐*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  
  #logininfo {
    width: 80%; /*让当前元素宽度占父元素宽度的80%*/
    height: 70%; /*让当前元素高度占父元素宽度的70%*/
    font-size: 16px;
    color: #6c6c6c;
    /*让子元素在主轴方向两端对齐*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  #btn_wrapper {
    /*使用弹性布局实现水平居中对齐*/
    /*display: flex;
      flex-direction: row;
      justify-content: center;*/
    text-align: center; /*让文本内容水平中对齐*/
  }
  
  h1,
  #a_wrapper {
    text-align: center; /*让文本内容水平中对齐*/
  }
  
  /*#a_wrapper{
      text-align: center; !*让文本内容水平中对齐*!
  }*/
  
  a:link, /*平常的普通状态*/
  a:active, /*激活的状态*/
  a:visited {
    /*已经访问过的状态*/
    color: #6c6c6c;
    text-decoration: none;
  }
  
  a:hover {
    /*鼠标放上去的状态*/
    color: #ff0000ff;
    text-decoration: underline;
    /*font-size: 20px;*/
  }
  
  /*
  作用：
     删除如下的样式，通过修改form位置解决问题
  */
  
  form {
    height: 100%;
  }
  </style>
  